import React from 'react';
import { View, Text, TouchableOpacity, Image, Alert } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { SwipeAction, Grid } from 'antd-mobile';
import moment from 'moment';
import styles from './styles';

const alert = Alert.alert;

export default props => {
  const {
    policyId,
    insuranceCompanyId,
    insuranceCompanyName,
    insuranceProductId,
    insuranceProductName,
    insuredId,
    insuredName,
    applicantId,
    applicantName,
    insuredAmount,
    underWritingDate,
    premium,
    customerId,
    customerName,
    onItemPress,
    insurancePeriod,
    store
  } = props;
  const right = [
    {
      text: '编辑',
      onPress: () => {
        Actions.editFamilyPolicy({
          customerId,
          id: policyId
        });
      },
      style: { backgroundColor: '#3399ff', color: '#fff' }
    }
  ];
  const removePolicy = () => {
    alert('删除家庭保单', `您确定要删除家庭单吗 ?`, [
      {
        text: '取消'
      },
      {
        text: '删除',
        onPress: store.remove.bind(store, policyId),
        style: { color: '#f00' }
      }
    ]);
  };
  const left = [
    {
      text: '删除',
      onPress: removePolicy,
      style: { backgroundColor: '#f00', color: '#fff' }
    }
  ];
  return (
    <SwipeAction right={right} left={left} autoClose>
      <View style={styles.itemWrap}>
        <Text style={styles.title}>
          {insuranceCompanyName}-{insuranceProductName}
        </Text>
        <TouchableOpacity onPress={onItemPress}>
          <View style={styles.row}>
            <View style={styles.col}>
              <Text style={[styles.gridText, styles.gridTitle]}>投保人</Text>
              <Text style={[styles.gridText]}>{applicantName}</Text>
            </View>
            <View style={styles.col}>
              <Text style={[styles.gridText, styles.gridTitle]}>被保人</Text>
              <Text style={[styles.gridText]}>{insuredName}</Text>
            </View>
            <View style={styles.col}>
              <Text style={[styles.gridText, styles.gridTitle]}>承保日期</Text>
              <Text style={[styles.gridText]}>
                {moment(underWritingDate).format('YYYY-MM-DD')}
              </Text>
            </View>
          </View>
          <View style={styles.row}>
            <View style={styles.col}>
              <Text style={[styles.gridText, styles.gridTitle]}>
                保险期限(年)
              </Text>
              <Text style={[styles.gridText]}>{insurancePeriod}</Text>
            </View>
            <View style={styles.col}>
              <Text style={[styles.gridText, styles.gridTitle]}>保费(元)</Text>
              <Text style={[styles.gridText]}>{premium}</Text>
            </View>
            <View style={styles.col}>
              <Text style={[styles.gridText, styles.gridTitle]}>保额(元)</Text>
              <Text style={[styles.gridText]}>{insuredAmount}</Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    </SwipeAction>
  );
};
